<template>
    <div class="storage">
        <div class="Breadcrumb">
            <Breadcrumb :breadList='position'></Breadcrumb>
        </div>
        <div class="storage-page">
            <div class="first-line">
                <span>Please Select Test Case</span>
            </div>
            <div class="second-line">
                <button class="button" @click="goto_fuction(0)">Memory Buffer Read Speed Test</button>
            </div>
            <div class="third-line">
                <button class="button" @click="goto_fuction(1)">Disk Read Speed Test</button>
                <button class="button" @click="goto_fuction(2)">Disk Write Speed Test</button>
            </div>
            <div class="fourth-line">
                <button class="button" @click="goto_fuction(3)">SDcard Read Speed Test</button>
                <button class="button" @click="goto_fuction(4)">SDcard Write Speed Test</button>
            </div>
            <div class="fivth-line">
                <button class="button" @click="goto_fuction(5)">USB Read Speed Test</button>
                <button class="button" @click="goto_fuction(6)">USB Write Speed Test</button>
            </div>
        </div>
    </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb';
export default {
    name:"Storage",
    data(){
        return {
            position: ["Main", "Linux", "Storage"]
        }
    },
    components:{
        Breadcrumb
    },
    methods:{
        goto_fuction(index){
            switch(index){
                case 0:
                    break
                case 1:
                    this.$router.push({
                        path:"DRST"
                    })
                    break
                default:
                    break

            }
        }
    },
}
</script>

<style scoped>
.storage{
  height: 100%;
  width: 100%;
}
.storage .Breadcrumb{
  height: 5%;
  width: 100%;
  border-bottom: 0.5px;
  box-sizing: border-box;
  border-bottom:solid;
  border-color: #8D8D8D;
     
}
.storage .storage-page{
  height: 95%;
  width: 100%;
     
}

.storage .storage-page .first-line {
    padding: 50px;
    font-size: 50px;
}

.storage .storage-page .second-line {
    padding: 20px 90px 20px 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.storage .storage-page .second-line .button{
    height: 60px;
    width: 230px;
}

.storage .storage-page .third-line {
    padding: 20px 90px 20px 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.storage .storage-page .third-line .button{
    height: 60px;
    width: 230px;
}

.storage .storage-page .fourth-line {
    padding: 20px 90px 20px 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.storage .storage-page .fourth-line .button{
    height: 60px;
    width: 230px;
}

.storage .storage-page .fivth-line {
    padding: 20px 90px 20px 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.storage .storage-page .fivth-line .button{
    height: 60px;
    width: 230px;
}
</style>

